<template>
  <div class="components-input-demo-presuffix">
    <!---->
    <a-input :placeholder="placeholder" v-model="textVals" readOnly :style="{width:width+'px'}" >
      <a-icon v-if="storeVals" slot="suffix" type="close-circle" @click="handleEmpty"  title="清空"/>
    </a-input>
    <a-button type="primary"  icon="plus" ghost  @click="openModal" style="margin-left:10px;">选择</a-button>
    <select-message-modal ref="modalForm" :template-id="storeVals" :templateType="templateType" @ok="modalFormOk"></select-message-modal>
  </div>
</template>

<script>
  import SelectMessageModal from './SelectMessageModal.vue'
  export default {
    name: 'SelectMessage',
    components:{
      SelectMessageModal
    },
    props:{
      value:{
        type:String,
        required:false
      },
      width:{
        type:String,
        default:'300',
      },
      placeholder:{
         type:String,
         default:'短信模版',
      },
      templateType:{
        type:Number
      }
      
    },
    data(){
      return {
        visible:false,
        confirmLoading:false,
        storeVals: '', 
        textVals: '' ,
      }
    },
    computed:{
    },
    mounted(){
      this.storeVals = this.value
    },
    watch:{
      value(val){
        this.storeVals = val
      }
    },
    methods:{
      openModal(){
        this.$refs.modalForm.show()
        this.$refs.modalForm.title=this.placeholder
      },
      handleEmpty(){
        this.modalFormOk('')
      },
      modalFormOk(rows){
        if(rows && rows.length>0){
          this.storeVals = rows[0].id
          this.textVals = rows[0].templateName
        }else{
          this.textVals = ''
          this.storeVals = ''
        }
        this.$emit("change", this.storeVals)
      },
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style scoped>
  .components-input-demo-presuffix .anticon-close-circle {
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
    font-size: 12px;
  }
  .components-input-demo-presuffix .anticon-close-circle:hover {
    color: #f5222d;
  }
  .components-input-demo-presuffix .anticon-close-circle:active {
    color: #666;
  }
</style>